<template>
  <div style="width: 100%;height: 100%">
    <el-container>
      <el-header height="120px">
        <div style="height:20px; font-size: 15px;background-color: rgba(205,205,205,0.2)">
          <div style="float: left; margin-left: 20px">
            <div>业务模块 > 小区管理</div>
          </div>
        </div>
        <div style="height: 90px;margin-top: 10px;min-height: 60px;font-size: 20px">
          <el-form ref="selectCommunity" :model="selectCommunity" :inline="true" label-width="100px">
            <el-col :span="7">
              <el-form-item label="小区名称" prop="xqmc">
                <el-input size="mini" v-model="selectCommunity.xqmc" style="width: 90%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="区域" prop="qywzid">
                <el-cascader size="mini"
                             @change="getSq"
                             v-model="selectCommunity.qywzid"
                             :options="options"
                             :props="props"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="商圈" prop="sqlsh">
                <el-select size="mini" v-model="selectCommunity.sqlsh">
                  <el-option v-for="item in sqList" :key="item.sqlsh" :value="item.sqlsh"
                             :label="item.sqmc"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="是否有车位" prop="sfycw">
                <el-select size="mini" v-model="selectCommunity.sfycw">
                  <el-option v-for="item in dictYON" :key="item.id" :label="item.dictLabel"
                             :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="是否有电梯" prop="sfydt">
                <el-select size="mini" v-model="selectCommunity.sfydt">
                  <el-option v-for="item in dictYON" :key="item.id" :label="item.dictLabel"
                             :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" size="mini" @click="getCommunity()">确定</el-button>
              <el-button size="mini" @click="toRestFild('selectBusiness')">重置</el-button>
            </el-col>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <div style="float: left">
          <el-button @click="addCommunity()" type="danger" size="mini">添加</el-button>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="xqlsh"
          height="310"
          default-expand-all>
          <el-table-column
            prop="xqmc"
            align="center"
            label="小区名称">
          </el-table-column>
          <el-table-column
            label="区域位置"
            align="center"
          >
            <template slot-scope="scope">
              <el-cascader
                v-model="scope.row.qywzid.split(';').map(Number)"
                :options="options"
                :props="props"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column
            prop="sqmc"
            align="center"
            label="商圈名称">
          </el-table-column>
          <el-table-column
            align="center"
            label="中心">
            <template slot-scope="scope">
              <el-popover
                placement="bottom"
                title="地图"
                width="300"
                trigger="click"
              >
                <div style="width: 300px;height: 250px">
                  <el-amap v-if="scope.row.xqlsh === showNum" vid="amapDemo"
                           :center="[scope.row.center.split(',')[0],scope.row.center.split(',')[1]]" :zoom="17"
                           :pitch="66">
                    <el-amap-marker :position="[scope.row.center.split(',')[0],scope.row.center.split(',')[1]]"
                                    :vid="index">
                    </el-amap-marker>
                  </el-amap>
                </div>
                <el-button slot="reference" @click="showNum = scope.row.xqlsh" type="text">{{
                    scope.row.center
                  }}
                </el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="小区简介"
            align="center"
            prop="xqjj">
          </el-table-column>
          <el-table-column
            label="是否有车位"
            align="center">
            <template slot-scope="scope">
              <span>{{ getYesOrNo(scope.row.sfycw, dictYON) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否有电梯"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ getYesOrNo(scope.row.sfydt, dictYON) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime">
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
          >
            <template slot-scope="scope">
              <el-button @click.native.prevent="editCommunity(scope)"
                         type="text"
              >编辑
              </el-button>
              <el-button @click.native.prevent="deleteCommunity(scope)"
                         type="text"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>

        <el-dialog
          :before-close="handleClose"
          :title="title"
          :visible.sync="dialogVisible"
          width="750">
          <div style="height: 400px">
            <el-form ref="community" :model="community" label-width="85px">
              <el-col :span="24">
                <el-form-item label="id:" prop="xqlsh">
                  <el-input v-model="community.xqlsh" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: true, message: '请选择区域位置！', trigger: 'blur' }]" label="区域位置:" prop="qywzid">
                  <el-cascader
                    v-model="community.qywzid"
                    :options="options"
                    :props="props"></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商圈：" prop="sqlsh">
                  <el-select v-model="community.sqlsh">
                    <el-option v-for="item in sqList1" :key="item.sqlsh" :value="item.sqlsh"
                               :label="item.sqmc"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]" label="小区名称"
                              prop="xqmc">
                  <el-autocomplete
                    v-model="community.xqmc"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
                    :trigger-on-focus="false"
                    style="font-size: 5px">
                    <template slot-scope="{ item }">
                      <a :title="item.value" style="text-decoration:none">{{ item.value }}</a>
                    </template>
                  </el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: true, message: '请选择小区列表', trigger: 'blur' }]" label="中心"
                              prop="center">
                  <el-input v-model="community.center" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: true, message: '请选择是否有电梯', trigger: 'blur' }]" label="是否有电梯"
                              prop="sfydt">
                  <el-select style="float: left" size="small" v-model="community.sfydt">
                    <el-option v-for="item in dictYON" :key="item.id" :label="item.dictLabel"
                               :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: true, message: '请选择是否有车位', trigger: 'blur' }]" label="是否有车位"
                              prop="sfycw">
                  <el-select style="float: left" size="small" v-model="community.sfycw">
                    <el-option v-for="item in dictYON" :key="item.id" :label="item.dictLabel"
                               :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item :rules="[{ required: true, message: '请输入小区简介', trigger: 'blur' }]" label="小区简介"
                              prop="xqjj">
                  <el-input v-model="community.xqjj"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :rules="[{ required: true, message: '请输入小区介绍', trigger: 'blur' }]" label="小区介绍"
                              prop="xqjs">
                  <el-input type="textarea" style="height: 100px" v-model="community.xqjs"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </div>
          <div>
            <el-upload
              class="upload-demo"
              ref="upload"
              action="127.0.0.1:8001/zmfpt-back/community/addCommunity"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-change="fileChange"
              :file-list="fileList"
              :limit="5"
              :on-exceed="upMaxFile"
              list-type="picture"
              :auto-upload="false">
              <!--              this.$refs.upload.submit();-->
              <el-button slot="trigger" size="small" type="primary">选取小区图片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且总共图片不能超过5张</div>
            </el-upload>
            <el-image
              ref="myImg"
              v-show="false"
              src="http://192.168.123.150/images/business/20211230/1426f19d50b04bd88d3a7a991e91e2e6_IMG_9054.JPG"
              :preview-src-list="prewList">
            </el-image>
          </div>
          <span style="float: bottom; margin-bottom: 30px" slot="footer" class="dialog-footer">
                                  <el-button @click="cancel()">取 消</el-button>
                                <el-button type="primary" @click="sureCommunity()">确 定</el-button>
                              </span>
        </el-dialog>
      </el-main>
    </el-container>

  </div>
</template>

<script>
export default {
  name: "communityModule",
  data() {
    return {
      selectCommunity: {
        sqlsh: '',
        xqmc: '',
        qywzid: [],
        sfycw: '',
        sfydt: ''
      },
      props: {
        value: 'areaId',
        label: 'areaName',
        children: 'children'
      },
      community: {
        xqlsh: '',
        xqmc: '',
        qywzid: [],
        sqlsh: '',
        center: '',
        sfycw: '',
        sfydt: '',
        xqjj: '',
        xqjs: '',
      },
      restaurants: [],
      options: [],
      sqList: [],
      sqList1: [],
      dictYON: [],
      tableData: [],
      total: 0,
      currentPage1: 1,
      pageSize: 10,
      dialogVisible: false,
      title: '',
      areaCode: '',
      showNum: '',
      addFileList: [],
      deleteFileList: [],
      prewList: [],
      fileList: [],
    }
  },
  mounted() {
    this.getCommunity()
    this.$getDict("YESORNO").then(res => {
      this.dictYON = res
      console.log(this.dictYON)
    })
    this.getAreaTree()
  },
  methods: {
    upMaxFile(file, fileList) {
      this.$message.error("图片数量不能超过5张！")
    },
    fileChange(file, fileList) {
      this.fileList.push(file)
      this.addFileList.push(file)
      this.prewList.push(file.url)
      console.log(file.url)
    },
    handleRemove(file, fileList) {
      let index3 = this.fileList.indexOf(file)
      this.fileList.splice(index3, 1)
      let index = this.addFileList.indexOf(file)
      if (index >= 0) {
        this.addFileList.splice(index, 1)
      } else {
        this.deleteFileList.push(file.id)
      }
      let index2 = this.prewList.indexOf(file.url)
      this.prewList.splice(index2, 1)
    },
    handlePreview(file) {
      console.log(file)
      this.$refs.myImg.showViewer = true
    },
    handleSelect(val) {
      this.community.xqmc = val.name
      this.community.center = val.location
      this.areaCode = val.adcode
    },
    toRestFild(ref) {
      this.$nextTick(() => {
        this.$refs[ref].resetFields()
      })
    },
    getCommunity() {
      this.$axios({
        url: '/community/getCommunityPage',
        method: 'get',
        params: {
          xqmc: this.selectCommunity.xqmc,
          qywzid: this.selectCommunity.qywzid.join(';'),
          sqlsh: this.selectCommunity.sqlsh,
          sfydt: this.selectCommunity.sfydt,
          sfycw: this.selectCommunity.sfycw,
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.$message.error("操作失败，请联系管理员！")
        }
      })
    },
    querySearch(queryString, cb) {
      if (this.community.qywzid.length > 0) {
        this.$axios({
          url: '/gaode/getInfoByKeywords',
          method: 'get',
          params: {
            keywords: this.community.xqmc,
            qywzid: this.community.qywzid[this.community.qywzid.length - 1],
            types:'120000'
          }
        }).then(res => {
          this.restaurants = res.data.data
          this.restaurants.filter(item => {
            item.value = item.name + " - " + item.adname + " - " + item.type.split(";")[0]
          })
          cb(this.restaurants);
        })
        // 调用 callback 返回建议列表的数据
      }
    },
    addCommunity() {
      this.dialogVisible = true;
      this.title = '新增小区'
    },
    editCommunity(scope) {
      this.dialogVisible = true;
      this.title = '编辑小区'
      let {qywzid, ...data} = scope.row
      this.$nextTick(() => {
        this.community = {
          qywzid: qywzid.split(';').map(Number),
          ...data,
        }
        this.fileList = []
        this.prewList = []
        data.imageList.forEach(item => {
          this.fileList.push(
            {
              url: "http://192.168.123.150" + item.path,
              name: item.name,
              id: item.id
            })
          this.prewList.push("http://192.168.123.150" + item.path)
        })
        console.log(this.prewList)
      })
    },
    deleteCommunity(scope) {
      this.$confirm('确认删除？')
        .then(_ => {
          let id = scope.row.xqlsh
          this.$axios({
            url: '/community/deleteCommunity',
            method: 'delete',
            params: {
              xqlsh: id
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$message.success("删除成功！")
              this.getCommunity()
            } else {
              this.$message.error("删除失败！")
            }
          })
        })
        .catch(_ => {
        });
    },
    getAreaTree() {
      this.$axios({
        url: "/area/getAreaTree",
        get: "get",
      }).then(res => {
        this.options = res.data.data
      })
    },
    getSq() {
      this.$axios({
        url: '/business/getSqByQywzid',
        method: "get",
        params: {
          qywzid: this.selectCommunity.qywzid.join(';')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.sqList = res.data.data
        } else {
          this.$message.error("操作失误，请联系管理员！");
        }
      })
    },
    getSq2() {
      // this.community.sqlsh = ''
      this.$axios({
        url: '/business/getSqByQywzid',
        method: "get",
        params: {
          qywzid: this.community.qywzid.join(';')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.sqList1 = res.data.data
        } else {
          this.$message.error("操作失误，请联系管理员！");
        }
      })
    },
    getYesOrNo(value, list) {
      let res = this.$getDictLabel(value, list)
      return res
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.getCommunity()
    },
    handleClose() {
      this.toRestFild('community');
      this.areaCode = ''
      this.dialogVisible = false
      this.addFileList = []
      this.deleteFileList = []
      this.fileList = []
    },
    cancel() {
      this.toRestFild('community');
      this.areaCode = ''
      this.fileList = []
      this.dialogVisible = false
      this.addFileList = []
      this.deleteFileList = []
    },
    sureCommunity() {
      let url = ''
      if (this.title === '新增小区') {
        url = '/community/addCommunity'
      } else {
        url = '/community/editCommunity'
      }
      let from = new FormData()
      if (this.addFileList.length === 0) {
        from.append("addFileList", null)
      } else {
        this.addFileList.forEach(item => {
          from.append("addFileList", item.raw)
        })
      }
      if (this.deleteFileList.length === 0) {
        from.append("deleteId", "0")
      } else {
        from.append("deleteId", this.deleteFileList.join(';'))
      }
      from.append("qywzid", this.community.qywzid.join(';'))
      from.append("areaCode", this.areaCode)
      from.append('xqlsh', this.community.xqlsh)
      from.append("xqmc", this.community.xqmc)
      if (this.community.sqlsh) {
        from.append('sqlsh', this.community.sqlsh)
      } else {
        from.append('sqlsh', "")
      }
      from.append('xqjj', this.community.xqjj)
      from.append('xqjs', this.community.xqjs)
      from.append('sfycw', this.community.sfycw)
      from.append('center', this.community.center)
      from.append('sfydt', this.community.sfydt)
      this.$refs['community'].validate((validate) => {
        if (validate) {
          this.$axios({
            headers: {
              "Content-Type": "multipart/form-data"
            },
            url: url,
            method: 'post',
            data: from
          }).then(res => {
            if (res.data.code === 200) {
              this.toRestFild('community')
              this.areaCode = ''
              this.dialogVisible = false
              this.$message.success("操作成功！")
              this.fileList = []
              this.addFileList = []
              this.deleteFileList = []
              this.getCommunity()
            } else {
              this.$message.error("操作失败，请联系管理员！")
            }
          })
        }
      })

    }
  },
  watch: {
    'community.qywzid'(val) {
      this.getSq2()
    }
  }
}
</script>

<style scoped>
.el-textarea__inner {
  height: 100px;
}
</style>
